<template>
  <div class="box">
    <div class="time">{{ nowTime }}</div>
    <div class="head">无人机指挥控制系统</div>
    <div class="content">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </div>
  </div>
</template>
<script setup>
import { sendMsg, listenMsg } from "@/utils/crossTagMsg";
import { ref, onMounted, onUnmounted, inject, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import moment from "moment";
const store = useStore();

const startTime = computed(() => {
  return store.state.home.startTime;
});
var currentTask, nextTask;

const nowTime = ref("2022-12-12 12:00:00");
onMounted(() => {
  initWebSocket();
  // window.location.reload();
  console.log("进入home");
});

var WEBPATH = localStorage.getItem("WEBPATH");
var socket;
const initWebSocket = () => {
  socket = new WebSocket(WEBPATH);
  socket.onopen = websocketonopen;
  socket.onmessage = websocketonmessage;
  socket.onerror = websocketonerror;
  socket.onclose = websocketclose;
};

// 接收信息
const websocketonmessage = (res) => {
  // console.log(res)
  var { messageType, data } = JSON.parse(res.data);
  // console.log(msgtype, data)
  switch (messageType) {
    case "setTask": 
      console.log("任务列表", data);
      store.commit("home/setTask", data);
      break;
    case "setPosition": 
      console.log("点位", data);
      //
      nowTime.value = data.nowTime;
      store.commit("home/setPosition", data);
      break;
    case "setTarget": 
      // console.log("目标", data);

      store.commit("home/setTarget", data);
      break;
    case "fashe": 
      console.log("发射", data);
      store.commit("home/setFs", data);
      break;
    case "baozha": //任务列表
      console.log("命中", data);
      store.commit("home/setBZ", data);
      break;
  }
};
// Websoket连接成功事件
const websocketonopen = (res) => {
  console.log("WebSocket连接成功", res);
  localStorage.setItem("flag", 1);

  let obj = {
    id: "all",
  };

  socket.send(JSON.stringify(obj));
};
// Websoket连接错误事件
const websocketonerror = (res) => {
  console.log("连接错误", res);
  // initWebSocket(WEBPATH)
  reconnect();
};
function reconnect() {
  if (lockReconnect) return;

  lockReconnect = true;
  //没连接上会一直重连，设置延迟避免请求过多
  setTimeout(function () {
    initWebSocket();
    lockReconnect = false;
  }, 2000);
}
var lockReconnect = false; //避免重复连接
var temp = ref(null);
// Websoket断开事件
const websocketclose = (res) => {
  let flag = localStorage.getItem("flag");
  if (flag == "1") {
    // localStorage.setItem('flag', 2)
    // window.viewer.entities.removeAll(true)
    // window.viewer.dataSources.removeAll(true)
    // window.viewer.dataSources.remove(redDataSource)

    // router.go(0)
    reconnect();
  }
};
</script>
<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;

  .time {
    position: absolute;
    right: 20px;
    font-size: 24px;
    font-weight: bold;
    top: 20px;
  }

  .head {
    height: 60px;
    background: url("@/assets/imgs/5.png") no-repeat;
    background-size: 100% 100%;
    text-align: center;
    line-height: 60px;
    font-size: 30px;
    font-weight: bold;
  }

  .content {
    height: calc(100% - 60px);
  }
}
</style>
